<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	
	</head>
	<body>
		<div class="img">
			<img src="img/timg.jpg"/>
		</div>
		<div class="btn">
			<button>收起</button>
			<button>展开</button>
			<button>切换</button>
			<button>切换图片</button>
		</div>
		<script type="text/javascript">
			//window.onload:当整个页面(包括图片，css，js)加载完成后再执行里面的js代码
			window.onload = function(){
				var btn = document.querySelectorAll(".btn button");
				var img = document.querySelector(".img");
				var imgEle = img.querySelector("img");
				var imgEleW = imgEle.offsetWidth,
				imgEleH = imgEle.offsetHeight;
				img.style.width = imgEleW+"px";
				img.style.height = imgEleH+"px";
				img.style.overflow = "hidden";
				var num = imgEleH;
				btn[0].addEventListener("click",function(){
				var timer =  setInterval(function(){
					num -= 2;
					img.style.height = num+"px";
					if(num<=0){
						//清除定时器
						clearInterval(timer);
					}
				},1)
			});
			//展开
			btn[1].addEventListener("click",function(){
				var timer =  setInterval(function(){
					num += 2;
					img.style.height = num+"px";
					if(num>=imgEleH){
						//清除定时器
						clearInterval(timer);
					}
				},1)
			});
			
			}
		</script>
	</body>
</html>
